<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';

// 天地图 官网申请的key https://console.tianditu.gov.cn/api/key
const webKey = '01fc395160d8eb3b82aefe65b2280e58';

Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

const czml = [
  {
    id: 'document',
    name: 'box',
    version: '1.0',
  },
  {
    id: 'point',
    // 物体在什么时间范围 存在
    availability: '2023-01-31T15:53:00Z/2023-01-31T16:00:00Z',
    name: 'Blue box',
    position: {
      // 起始时间点
      epoch: '2023-01-31T15:53:00Z',
      // 设置了四个维度 1维是 时间，2维 是经度 3维 纬度 4维 是高度
      cartographicDegrees: [
        0,
        -70,
        20,
        150000,
        100,
        -80,
        44,
        150000,
        200,
        -90,
        18,
        150000,
        300,
        -98,
        52,
        150000, // 最后停下来的位置
      ],
    },
    point: {
      color: {
        rgba: [255, 255, 255, 128],
      },
      outlineColor: {
        rgba: [255, 0, 0, 128],
      },
      outlineWidth: 3,
      pixelSize: 15,
    },
  },
];

console.log(JSON.stringify(czml)); //
onMounted(async () => {
  // 地球视图，底图加载
  const viewer = new Cesium.Viewer('container', {
    //信息窗口
    infoBox: false,
    shouldAnimate: true, // 运动状态
  });

  //隐藏cesium Icon-logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  // 定位到中国
  // viewer.camera.flyTo({
  //   destination: Cesium.Cartesian3.fromDegrees(104.06667, 30.66667, 5000000.0), // 中国的经纬度和高度
  // });

  const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
  dataSourcePromise.then((dataSourcePromise) => {
    console.log(dataSourcePromise);
    viewer.dataSources.add(dataSourcePromise);
    // viewer.zoomTo(dataSourcePromise);
  });
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#container {
  height: 94vh;
  width: 94vw;
}
</style>
